<style lang="less" >
@import "@/styles/table-common.less";
.search-manage {
  width: 600px;
  margin: 0 auto;
}
.ivu-col .btn {
  display: block;
  margin: 20px auto;
}
.type-list {
  display: flex;
flex-wrap: wrap;
  div {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    position: relative;
    margin-bottom:10px;
    span {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 5px;
      left: 0;
      top: 0;
      overflow: hidden;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
      &.dis {
        box-shadow: none;
        &::after {
          position: absolute;
          content: "";
          background-color: #fff;
          opacity: 0.8;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
        }
      }
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style> 
<template>
  <div class="search-manage">
    <!-- <Card> -->

    <!-- <Form ref="searchForm" :model="searchForm" inline :label-width="100">
        <Row v-show="openSearch" @keydown.enter.native="handleSearch">
          
          <FormItem label="昵称：">
            <Input
              type="text"
              v-model="searchForm.title"
              clearable
              placeholder="请输入会规则名称"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="手机号：">
            <Select v-model="searchForm.cleanType" transfer placeholder="请选择" style="width: 200px">
              <Option v-for="item in rouleList" :value="item.value" :key="item">{{ item.title }}</Option>
            </Select>
          </FormItem>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
          </FormItem>
        </Row>
      </Form> -->
    <Form
      width=""
      ref="form"
      :model="userForm"
      :rules="ruleValidate"
      label-width="200"
    >
      <Row :gutter="32">
        <Col span="24">
          <FormItem label="昵称：" prop="nickname">
            <Input v-model="userForm.nickname" placeholder="请填写昵称" />
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="真实姓名：" prop="realName">
            <Input v-model="userForm.realName" placeholder="请填写真实姓名" />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="24">
          <FormItem label="手机号：" prop="mobile">
            <Input v-model="userForm.mobile" placeholder="请填写手机号" />
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="身份证号：" prop="idCard">
            <Input v-model="userForm.idCard" placeholder="请填写身份证号" />
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="用户身份：">
            <div class="type-list">
              <div v-for="item in scParkRoleList" :key="item.id">
                <span :class="{ dis: !item.isSelect }" @click="setMember(item)">
                  <img :src="item.icon" alt="" />
                </span>
              </div>
            </div>
            <!-- <Avatar shape="square" icon="ios-person" v-for="item in scParkRoleList" :key="item.id" :src="item.icon" /> -->
            <!-- <Tag v-for="item in scParkRoleList" :color="item.isSelect?'success':'default'" :key="item.id">{{item.title}}</Tag> -->
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="企业名称">
            <Input disabled v-model="userForm.companyName" placeholder="" />
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="企业云打印积分：">
            <Input
              disabled
              v-model="userForm.companyPrintIntegral"
              placeholder=""
            />
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="企业共享会议积分：">
            <Input
              disabled
              v-model="userForm.companyMeetIntegral"
              placeholder=""
            />
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="账户余额：">
            <Input disabled v-model="userForm.nowMoney" placeholder="" />
          </FormItem>
        </Col>
        <Col
          span="24"
          v-for="(item, index) in userForm.userAccounts"
          :key="index"
        >
          <FormItem :label="item.integralName + '：'">
            <Input disabled v-model="item.num" placeholder="" />
          </FormItem>
        </Col>
      </Row>
      <Col span="24">
        <Button class="btn" type="primary" @click="submit">保存</Button>
      </Col>
    </Form>

    <!-- </Card> -->
    <!-- <addEdit
      :data="form"
      :type="showType"
      v-model="showUser"
      @on-submit="getDataList"
    /> -->
  </div>
</template>

<script>
import {
  getScUserById,
  scUserUpdate,
  getScParkRoleAll,
  setMemberApi,
} from "@/api/index";

export default {
  name: "user-manage",
  components: {
    // addEdit,
  },
  props: ["scuid"],
  data() {
    return {
      message: "",
      height: 510,
      showUser: false,
      showType: "0",
      loading: true,
      openSearch: true,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        sort: "createTime",
        order: "desc",
      },
      userForm: { userAccounts: [] },
      ruleValidate: {
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
      },
      data: [],
      userInfo: {},
      scParkRoleList: [],
    };
  },
  methods: {
    setMember(item) {
      console.log(item);
      console.log(this.scParkRoleList);
      console.log(this.userForm)
      // if (item.parkRoleType != 1) {
      //   return;
      // }
      let cont = item.isSelect ? "禁用" : "启用";
      let api = item.isSelect ? "disableMember" : "enableMember";
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要" + cont + "该会员</p>",
        onOk: () => {
          setMemberApi({
            params: { parkRoleId: item.id, uid: this.userForm.id },
            api,
          }).then((res) => {
            if (res.success) {
              this.$Message.success("修改成功");
              this.scParkRoleList = this.scParkRoleList.map((val_item) => {
                if (item.id == val_item.id) {
                  val_item.isSelect = !val_item.isSelect;
                }
                return val_item
              });
            }
          });
        },
        onCancel: () => {},
      });
    },
    init() {
      this.getDataList();
    },
    getScUserByIdData() {
      getScUserById(this.scuid).then((res) => {
        if (res.success) {
          // let companyInfo = JSON.parse(localStorage.getItem('localStorage_companyInfo'))
          // console.log('aaaaa',companyInfo)
          let result = {
            ...res.result,
            // ...companyInfo
          };
          // console.log('companyInfo',result)
          this.userForm = result;
          this.getScParkRoleAllData(result.parkRoles,result.userCards);
        }
      });
    },
    getScParkRoleAllData(val,val1) {
      getScParkRoleAll().then((res) => {
        if (res.success) {
          // this.idenTypeList = res.result;
          this.scParkRoleList = res.result;
          this.scParkRoleList.forEach((item) => {
            val.forEach((val_item) => {
              if (item.id == val_item.parkRoleId) {
                item.isSelect = true;
              }
            });
             val1.forEach((val1_item) => {
              if (item.id == val1_item.productId) {
                item.isSelect = true;
              }
            });
          });
          // console.log('aaaa',idenTypeList)
        }
      });
    },
    getDataList() {
      // 多条件搜索用户列表
      // this.loading = true;
      // getScInOutRule(this.searchForm).then(res => {
      //   this.loading = false
      //   if (res.success) {
      //     // this.data = res.result
      //     this.data = res.result.content;
      //     this.total = res.result.totalElements;
      //     if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
      //       this.searchForm.pageNumber -= 1;
      //       this.getDataList();
      //     }
      //   }
      // })
    },

    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
    submit() {
      console.log(this.userForm);
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = {
            companyId: this.userForm.companyId,
            nickname: this.userForm.nickname,
            mobile: this.userForm.mobile,
            realName: this.userForm.realName,
            idCard: this.userForm.idCard,
            id: this.scuid,
          };
          scUserUpdate(obj).then((res) => {
            if (res.success) {
              this.$Message.success("操作成功");
              this.visible = false;
              this.getScUserByIdData();
            }
          });
        }
      });
    },
  },
  created() {
    console.log("created11111");
    this.getScUserByIdData();
  },
  activated() {
    console.log("scuid33", this.scuid);
    this.getScUserByIdData();
  },
  mounted() {
    // 计算高度
    this.height = Number(document.documentElement.clientHeight - 230);
    this.init();
  },
};
</script>